<template>
  <a-list itemLayout="horizontal" :dataSource="data">
    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
      <a-list-item-meta>
        <a slot="title">{{ item.title }}</a>
        <span slot="description">
          <span class="security-list-description">{{ item.description }}</span>
        </span>
      </a-list-item-meta>
      <template v-if="item.actions">
        <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
      </template>
    </a-list-item>
    <update-password ref="updatePassword" />
  </a-list>
</template>

<script>
  import UpdatePassword from './UpdatePassword'
  import { mapState } from 'vuex'
  import { structure } from '@/utils/util'

  export default {
    name: 'Security',
    components: {
      UpdatePassword
    },
    data () {
      return {
        data: [
          { title: '账户密码', description: '已设置账户密码', actions: { title: '修改', callback: () => { this.showUserPassword() } } },
          // { title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', actions: { title: '设置', callback: () => { this.$message.info('功能完善中...') } } },
          // { title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', actions: { title: '绑定', callback: () => { this.$message.info('功能完善中...') } } }
        ]
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.info
      })
    },
    methods: {
      showUserPassword() {
        this.$nextTick(() => {
          this.$refs.updatePassword.handleUpdatePwd(this.userInfo.username)
        })
      }
    }
  }
</script>

<style scoped>

</style>
